<template>
  <div id="container">
    <img id="bgImage" src="../../assets/login/yasuoLogin .jpg">

    <div id="loginForm">
      <br>
      <h2>登录</h2>
      <br>
      <div class="mt_10">
        <Input v-model="username" type="text" placeholder="请输入用户名" style="width: 100%;" prefix="ios-contact" />
        <!-- <Icon type="ios-contact" slot="prefix" />
        </Input> -->
      </div>

      <div class="mt_10">
        <Input v-model="passwd" type="password" placeholder="请输入密码" style="width: 100%;" prefix="md-key" />
        <!-- <Icon type="md-key" slot="prefix" />
        </Input> -->
      </div>

      <div class="mt_10">
        <Checkbox v-model="isAutoLogin">自动登录</Checkbox>
      </div>
      <div class="mt_10">
        <Button type="success" @click="submitAction" long :loading="isLoading">提交</Button>
      </div>
    </div>
  </div>
</template>

<script>
import apis from "../../util/apis.js";

export default {
  name: "",
  data() {
    return {
      username: "",
      passwd: "",
      isAutoLogin: true,
      isLoading: false
    };
  },
  methods: {
    submitAction() {
      if (!this.username) {
        this.$Message.warning("请输入用户名");
        return;
      }

      if (!this.passwd) {
        this.$Message.warning("请输入密码");
        return;
      }

      let payload = {
        code: this.passwd,
        grantType: "password",
        login: this.username,
        rememberMe: true
      };
      this.isLoading = true;
      this.$axios({
        method: "post",
        url: apis.loginApi,
        headers: {
          "Content-Type": "application/json"
        },
        data: payload
      })
        .then(res => {
          if (res.status == "200") {
            this.isLoading = false;

            let data = res.data;
            this.$localStorage.storageSet(data.id_token, "TOKEN");

            this.$router.push({
              name: "Home"
            });
          } else {
            this.$Message.error(res.data.detail);
          }
        })
        .catch(err => {
          this.$Message.error(err.response.data.message);
        });
    }
  },
  created() {
    // console.log(localStorage.__TOKEN__);
    // if (localStorage.__TOKEN__) {
    //   this.$router.push({
    //     name: "Home"
    //   });
    // }
    var lett = this;
    document.onkeydown = function(e) {
      var key = window.event.keyCode;
      if (key == 13) {
        lett.submitAction();
      }
    };
  }
};
</script>

<style scoped>
#bgImage {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}

#loginForm {
  position: absolute;
  left: 10%;
  top: 25%;
  width: 350px;
  height: 350px;
  padding: 10px;
  background-color: white;
}
</style>